<template>
  <div class="login">
      <all-top></all-top>
      <!-- <h1>登录页面</h1> -->
      <div class="input_content">
        <div class="input_content_top">
          <input class="phone_input" type="text" v-model="user" placeholder="请输入手机号"> 
          <button :style="get_red">发送验证码</button>
        </div>
        <div class="input_content_bottom">
          <input type="text" v-model="code" placeholder="请输入短信验证码">
        </div>
      </div>
      <div class="login_button">
        <button @click="get_next" :style="change_login_button" :disabled="isRight">登录</button>
      </div>
      <div class="more_content">
        <div class="check_box">
          <van-checkbox icon-size="12" v-model="checked" checked-color="#fe8c00" class="chang_color">我已阅读并同意</van-checkbox>
          <a href="#">《猫眼用户服务协议》</a> &nbsp;
          <a href="#">《隐私政策》</a>
        </div>
        <!-- <span><input type="checkbox" name="" id="">我已阅读并同意
        </span>  -->
        <span>客服电话：<a href="#">1010-5335</a> </span>
        <span class="last_span">未注册的手机号将自动生成新账号</span>
      </div>
  </div>
</template>

<script>
// import func from 'vue-editor-bridge';
import AllTop from "../all/AllTop.vue"
export default {
  name:"login",
  data(){
    return {
      checked: false,
      user:"",
      code:"",
      isRight:true
    }
  },
  components:{
    AllTop
  },
  methods:{
    get_next(e){
      console.log("点击了登录");
      console.log(this.user);
      localStorage.setItem("user", this.user);
      this.$router.push("/mine")
    }
  },
  computed:{
    // 这里利用 动态绑定style进行样式的修改
    // computed非常好用，可以获取动态绑定的input的值
    // 上面  :style="XXX" XXX是变量，也可以是计算属性(可以看成一个变量)
    get_red: function(){
      if(this.user.length >= 11){
        console.log("号码足够长了");
        return "color:red"
      }else{
        return 
      }
    },
    change_login_button: function(){
      if(this.code.length == 6  && this.checked ){
        console.log("验证码够长了");
        this.isRight = false;
        return "color:#fff ; background-color:#999"
      }else{
        return  this.isRight = true;
      }
    }
  }
}
</script>

<style lang="less" scoped>
    .login{
      height: 100%;
      background-color: #fff;
      
      input{
        &::placeholder{
          color: rgb(217, 207, 204);
        }
      }
    }
    .red{
      color:red
    }
    .input_content{
      width: 90%;
      height: 100px;
      // border:1px solid red;
      margin: 0 auto;
      margin-top: 50px;
      margin-bottom: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .input_content_top{
        width: 100%;
        // border: 1px solid grey;
        border-bottom: 1px solid rgb(241, 241, 241);
        display: flex;
        justify-content: space-between;
        .phone_input{
          width: 60%;
          height: 32px;
          font-size: 14px;
          outline: none;
          border: none;
          padding: 0 10px;

        }
        button{
          outline: none;
          border: none;
          width: 30%;
          height: 32px;
          font-size: 14px;
          background-color: #fff;
          color: rgb(217, 207, 204);
        }
      }
      .input_content_bottom{
        border-bottom: 1px solid rgb(241, 241, 241);
        width: 100%;
        // border: 1px solid green;
        input{
          width: 94%;
          height: 32px;
          font-size: 14px;
          outline: none;
          border: none;
          padding: 0 10px;
        }
      }
    }
    .login_button{
      width: 90%;
      height: 50px;
      margin: auto;
      button{
        display: block;
        width: 100%;
        height: 100%;
        font-size: 16px;
        border-radius: 24px;
        outline: none;
        border: none;
        color: rgb(153, 153, 153);
      }
    }
    .more_content{
      display: flex;
      margin-top: 20px;
      align-items: center;
      flex-direction: column;
      color: rgb(124, 124, 124);
      .last_span{
        margin-top: 10px;
      }
      a{
        color: rgb(223, 45, 45);
      }
      input{
        border-radius: 50%;
      }
      .check_box{
        display: flex;
        align-items: center;
        .chang_color{
          color: rgb(124, 124, 124);
        }
      }
    }
</style>